/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host {
    --spectrum-card-background-color: var(--mod-card-background-color, var(--spectrum-background-layer-2-color));
    --spectrum-card-body-spacing: var(--mod-card-body-spacing, var(--spectrum-spacing-400));
    --spectrum-card-body-padding-block-start: var(--mod-card-body-padding-block-start, var(--spectrum-spacing-300));
    --spectrum-card-title-padding-right: var(--mod-card-title-padding-right, var(--spectrum-spacing-400));
    --spectrum-card-content-margin-top: var(--mod-card-content-margin-top, var(--spectrum-spacing-100));
    --spectrum-card-content-margin-bottom: var(--mod-card-content-margin-bottom, var(--spectrum-spacing-300));
    --spectrum-card-footer-padding-top: var(--mod-card-footer-padding-block-start, var(--spectrum-spacing-100));
    --spectrum-card-subtitle-padding-right: var(--mod-card-subtitle-padding-right, var(--spectrum-spacing-100));
    --spectrum-card-border-width: var(--mod-card-border-width, var(--spectrum-border-width-100));
    --spectrum-card-corner-radius: var(--mod-card-corner-radius, var(--spectrum-corner-radius-100));
    --spectrum-card-title-font-family: var(--mod-card-title-font-family, var(--spectrum-sans-font-family-stack));
    --spectrum-card-title-font-size: var(--mod-card-title-font-size, var(--spectrum-heading-size-xxs));
    --spectrum-card-title-font-weight: var(--mod-card-title-font-weight, var(--spectrum-heading-sans-serif-font-weight));
    --spectrum-card-title-font-style: var(--mod-card-title-font-style, var(--spectrum-heading-sans-serif-font-style));
    --spectrum-card-title-line-height: var(--mod-card-title-line-height, var(--spectrum-heading-line-height));
    --spectrum-card-title-font-color: var(--mod-card-title-font-color, var(--spectrum-heading-color));
    --spectrum-card-body-font-family: var(--mod-card-body-font-family, var(--spectrum-sans-font-family-stack));
    --spectrum-card-body-font-size: var(--mod-card-body-font-size, var(--spectrum-body-size-s));
    --spectrum-card-body-font-weight: var(--mod-card-body-font-weight, var(--spectrum-body-sans-serif-font-weight));
    --spectrum-card-body-font-style: var(--mod-card-body-font-style, var(--spectrum-body-sans-serif-font-style));
    --spectrum-card-body-line-height: var(--mod-card-body-line-height, var(--spectrum-body-line-height));
    --spectrum-card-body-font-color: var(--mod-card-body-font-color, var(--spectrum-body-color));
    --spectrum-card-actions-spacing: var(--mod-card-actions-spacing, var(--spectrum-spacing-300));
    --spectrum-card-actions-size: var(--mod-card-actions-size, var(--spectrum-card-selection-background-size));
    --spectrum-card-actions-border-radius: var(--mod-card-actions-border-radius, var(--spectrum-corner-radius-100));
    --spectrum-card-actions-background-color-rgb: var(--mod-card-actions-background-color-rgb, var(--spectrum-gray-100-rgb));
    --spectrum-card-actions-background-color-opacity: var(--mod-card-actions-background-color-opacity, var(--spectrum-card-selection-background-color-opacity));
    --spectrum-card-actions-drop-shadow-color: var(--mod-card-actions-drop-shadow-color, var(--spectrum-drop-shadow-color));
    --spectrum-card-actions-drop-shadow-x: var(--mod-card-actions-drop-shadow-x, var(--spectrum-drop-shadow-x));
    --spectrum-card-actions-drop-shadow-y: var(--mod-card-actions-drop-shadow-y, var(--spectrum-drop-shadow-y));
    --spectrum-card-actions-drop-shadow-blur: var(--mod-card-actions-drop-shadow-blur, var(--spectrum-drop-shadow-blur));
    --spectrum-card-focus-indicator-color: var(--mod-card-focus-indicator-color, var(--spectrum-focus-indicator-color));
    --spectrum-card-focus-indicator-width: var(--mod-card-focus-indicator-width, var(--spectrum-focus-indicator-thickness));
    --spectrum-card-selected-background-opacity: var(--mod-card-selected-background-opacity, 0.1);
    --spectrum-card-preview-border-width-selected: var(--mod-card-preview-border-width-selected, var(--spectrum-border-width-100));
    --spectrum-card-horizontal-body-padding: var(--mod-card-horizontal-body-padding, var(--spectrum-spacing-300));
    --spectrum-card-horizontal-preview-padding: var(--mod-card-horizontal-preview-padding, var(--spectrum-spacing-200));
}

:host([variant="quiet"]) {
    --mod-card-minimum-width: var(--mod-card-minimum-width-quiet);
    --mod-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100));
}

:host([variant="gallery"]) {
    --spectrum-card-content-margin-top: var(--spectrum-spacing-100);
}

:host([drop-target]),
:host([selected]) {
    --spectrum-card-border-color: var(--mod-card-border-color-selected, var(--spectrum-blue-700));
}

:host {
    box-sizing: border-box;
    min-inline-size: var(--mod-card-minimum-width, var(--spectrum-card-minimum-width));
    border: var(--spectrum-card-border-width) solid transparent;
    border-radius: var(--spectrum-card-corner-radius);
    border-color: var(--mod-card-border-color, var(--spectrum-card-border-color));
    background-color: var(--spectrum-card-background-color);
    flex-direction: column;
    text-decoration: none;
    display: inline-flex;
    position: relative;
}

:host:after,
:host:before {
    content: "";
    block-size: 100%;
    inline-size: 100%;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}

:host:after {
    border-radius: var(--spectrum-card-corner-radius);
    border: 0 solid #0000;
    margin-block-start: calc(var(--spectrum-card-focus-indicator-width) * -1);
    margin-inline-start: calc(var(--spectrum-card-focus-indicator-width) * -1);
    inset-inline-end: 0;
}

:host(:focus-visible) {
    outline: none;
}

:host(:focus-visible):after {
    border-width: var(--spectrum-card-focus-indicator-width);
    border-color: var(--spectrum-card-focus-indicator-color);
}

:host(:focus-visible) #cover-photo,
:host(:focus-visible) #preview {
    border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-focus-indicator-width));
    border-start-end-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-focus-indicator-width));
}

:host([selected]):before {
    background-color: rgb(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--spectrum-card-selected-background-opacity));
}

:host([drop-target]) {
    --mod-card-background-color: var(--spectrum-background-base-color);

    box-shadow: 0 0 0 1px var(--spectrum-card-border-color);
}

:host([focused]) .actions,
:host([focused]) .checkbox-toggle,
:host([selected]) .actions,
:host([selected]) .checkbox-toggle,
:host(:focus) .actions,
:host(:focus) .checkbox-toggle {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

.checkbox-toggle {
    visibility: hidden;
    box-shadow: var(--spectrum-card-actions-drop-shadow-x) var(--spectrum-card-actions-drop-shadow-y) var(--spectrum-card-actions-drop-shadow-blur) var(--spectrum-card-actions-drop-shadow-color);
    inline-size: var(--spectrum-card-actions-size);
    block-size: var(--spectrum-card-actions-size);
    border-radius: var(--spectrum-card-actions-border-radius);
    background-color: rgb(var(--spectrum-card-actions-background-color-rgb), var(--spectrum-card-actions-background-color-opacity));
    pointer-events: auto;
    box-sizing: border-box;
    transition:
        transform 0.13s ease-in-out,
        opacity 0.13s ease-in-out,
        visibility 0s linear 0.13s;
    transition:
        transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
        opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
        visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s));
    justify-content: center;
    align-items: center;
    display: inline-flex;
    position: absolute;
    inset-block-start: calc(var(--spectrum-card-actions-spacing) - var(--spectrum-card-border-width));
    inset-inline-start: calc(var(--spectrum-card-actions-spacing) - var(--spectrum-card-border-width));
}

.actions {
    inset-block-start: var(--spectrum-card-actions-spacing);
    inset-inline-end: var(--spectrum-card-actions-spacing);
}

#cover-photo {
    block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height));
    box-sizing: border-box;
    background-position: 50%;
    background-size: cover;
    background-color: var(--mod-card-preview-background-color, var(--spectrum-card-preview-background-color));
    border-block-end-color: var(--mod-card-border-color, var(--spectrum-card-border-color));
    border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
    border-start-end-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    overflow: hidden;
}

.spectrum-Divider {
    margin: 0;
}

.content {
    align-items: center;
    margin-block-start: var(--spectrum-card-content-margin-top);
    display: flex;
}

.body {
    padding-block-start: var(--spectrum-card-body-padding-block-start);
    padding-block-end: var(--mod-card-body-padding-block-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
    padding-inline-start: var(--mod-card-body-padding-inline-start, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
    padding-inline-end: var(--mod-card-body-padding-inline-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
}

#preview {
    color: var(--spectrum-card-body-font-color);
    border-start-start-radius: var(--spectrum-card-corner-radius);
    border-start-end-radius: var(--spectrum-card-corner-radius);
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    align-items: center;
    display: flex;
    overflow: hidden;
}

.title {
    font-family: var(--spectrum-card-title-font-family);
    font-size: var(--spectrum-card-title-font-size);
    font-weight: var(--spectrum-card-title-font-weight);
    font-style: var(--spectrum-card-title-font-style);
    line-height: var(--spectrum-card-title-line-height);
    color: var(--spectrum-card-title-font-color);
    padding-inline-end: var(--spectrum-card-title-padding-right);
}

.subtitle {
    color: var(--spectrum-card-title-font-color);
    text-transform: none;
    padding-inline-end: var(--spectrum-card-subtitle-padding-right);
}

.subtitle + ::slotted([slot="description"]):before {
    content: "•";
    padding-inline-end: var(--spectrum-card-subtitle-padding-right);
}

::slotted([slot="description"]) {
    font-family: var(--spectrum-card-body-font-family);
    font-size: var(--spectrum-card-body-font-size);
    font-weight: var(--spectrum-card-body-font-weight);
    font-style: var(--spectrum-card-body-font-style);
}

::slotted([slot="description"]),
::slotted([slot="footer"]) {
    line-height: var(--spectrum-card-body-line-height);
    color: var(--spectrum-card-body-font-color);
}

::slotted([slot="footer"]) {
    border-block-start: var(--spectrum-card-border-width) solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
    margin-block-start: var(--mod-card-footer-margin-block-start, calc((var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom)) * -1));
    margin-inline-start: var(--mod-card-footer-margin-inline-start, var(--spectrum-card-body-spacing));
    margin-inline-end: var(--mod-card-footer-margin-inline-end, var(--spectrum-card-body-spacing));
    padding-block-start: var(--spectrum-card-footer-padding-top);
    padding-block-end: var(--mod-card-footer-padding-block-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
}

.header {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.action-button {
    z-index: 1;
}

:host([variant="quiet"]) #preview {
    border: var(--spectrum-card-focus-indicator-width) solid transparent;
}

:host([variant="quiet"][focused]):after,
:host([variant="quiet"]:focus):after {
    border-width: 0;
}

:host([variant="quiet"][focused]) #preview:after,
:host([variant="quiet"]:focus) #preview:after {
    border-color: var(--spectrum-card-focus-indicator-color);
}

:host([variant="quiet"][selected]) #preview {
    border: var(--spectrum-card-preview-border-width-selected) solid;
    border-color: var(--spectrum-card-border-color);
}

:host([variant="gallery"]),
:host([variant="quiet"]) {
    --mod-card-border-color-hover: transparent;

    background-color: initial;
    block-size: 100%;
    border-width: 0;
    border-color: #0000;
    border-radius: 0;
    overflow: visible;
}

:host([variant="gallery"]):before,
:host([variant="quiet"]):before {
    display: none;
}

:host([variant="gallery"]) #preview,
:host([variant="quiet"]) #preview {
    border-radius: var(--spectrum-card-corner-radius);
    background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color)));
    min-block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height));
    inline-size: 100%;
    box-sizing: border-box;
    transition: background-color var(--mod-card-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)));
    flex: 1;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

:host([variant="gallery"]) #preview:before,
:host([variant="quiet"]) #preview:before {
    content: "";
    block-size: 100%;
    inline-size: 100%;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}

:host([variant="gallery"]) #preview:after,
:host([variant="quiet"]) #preview:after {
    content: "";
    block-size: 100%;
    inline-size: 100%;
    border-radius: calc(var(--spectrum-card-corner-radius) + var(--spectrum-card-focus-indicator-width));
    border: 0 solid #0000;
    margin-block-start: calc(var(--spectrum-card-focus-indicator-width) * -1);
    margin-inline-start: calc(var(--spectrum-card-focus-indicator-width) * -1);
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
}

:host([variant="gallery"][drop-target]),
:host([variant="quiet"][drop-target]) {
    background-color: initial;
    box-shadow: none;
    border-color: #0000;
}

:host([variant="gallery"][drop-target]) #preview,
:host([variant="quiet"][drop-target]) #preview {
    background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color)));
    transition: none;
}

:host([variant="gallery"][drop-target]) #preview:before,
:host([variant="quiet"][drop-target]) #preview:before {
    border-color: var(--spectrum-card-focus-indicator-color);
    box-shadow: 0 0 0 1px var(--spectrum-card-focus-indicator-color);
}

:host([variant="gallery"][selected]) #preview:before,
:host([variant="quiet"][selected]) #preview:before {
    background-color: rgb(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity)));
}

:host([variant="gallery"]) .body,
:host([variant="quiet"]) .body {
    margin-block-start: var(--spectrum-card-content-margin-top);
    padding: 0;
}

:host([variant="gallery"]) ::slotted([slot="footer"]),
:host([variant="quiet"]) ::slotted([slot="footer"]) {
    margin-inline: 0;
}

:host([horizontal]) {
    flex-direction: row;
}

@media (hover: hover) {
    :host(:hover) {
        --mod-card-border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover));
    }

    :host(:hover) .actions,
    :host(:hover) .checkbox-toggle {
        visibility: visible;
        opacity: 1;
        pointer-events: all;
    }

    :host([variant="gallery"]:hover) #preview,
    :host([variant="quiet"]:hover) #preview {
        background-color: var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-card-preview-background-color-hover)));
    }

    :host([horizontal]:hover) #preview {
        border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover));
    }
}

:host([horizontal]) #preview {
    min-block-size: 0;
    padding: var(--spectrum-card-horizontal-preview-padding);
    background-color: var(--mod-card-preview-background-color, var(--spectrum-card-preview-background-color));
    border-color: var(--mod-card-border-color, var(--spectrum-card-border-color));
    border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-end-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
}

:host([horizontal]) .content,
:host([horizontal]) .header {
    block-size: auto;
    margin-block-start: 0;
}

:host([horizontal]) .content {
    margin-block-end: 0;
}

:host([horizontal]) .title {
    padding-inline-end: 0;
}

:host([horizontal]) .body {
    padding-block: 0;
    padding-inline: var(--spectrum-card-horizontal-body-padding);
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    display: flex;
}

:host([variant="gallery"]) {
    min-inline-size: 0;
}

:host([variant="gallery"]) #preview {
    border-radius: 0;
    padding: 0;
}
